import React, { memo, useCallback, useEffect, useState } from 'react'
import { UserProfileWrapper } from './style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { getUserOpusAction } from '@/store/blog/actionCreators'
import setMessage from '@/utils/setMessage'
import {
  LinkOutlined,
  SendOutlined,
  TagOutlined,
  IdcardOutlined,
  KeyOutlined,
  SettingOutlined
} from '@ant-design/icons'
import UserDesc from '@/components/b_user_desc'
import Setting from '@/components/b_setting'
import { Button } from 'antd'
import { judgeFollow, postFollowOne } from '@/network/blog/friend.request'

function B_UserProfile(props) {
  // 是否关注
  const [isFollow, setIsFollow] = useState(false)

  const { individual = [], userId, localId } = props
  const dispatch = useDispatch()

  useEffect(() => {
    userId && dispatch(getUserOpusAction(userId))
  }, [dispatch, userId])

  const { userOpus = [], userProfile = {} } = useSelector(
    (state) => ({
      userOpus: state.blogReducer.getIn(['userOpus']),
      userProfile: state.blogReducer.getIn(['userProfile'])
    }),
    shallowEqual
  )

  // 关注一个用户
  const followOne = useCallback(
    async (friendId, nickname) => {
      if (localId) {
        // 已登录
        const result = await postFollowOne(friendId, nickname)
        if (result.insertId) {
          // 关注成功
          setMessage('关注成功', 'success')
          setIsFollow(true)
        }
      } else {
        setMessage('未登录', 'info')
      }
    },
    [localId]
  )

  useEffect(() => {
    if (localId) {
      // 已登录
      judgeFollow(userId)
        .then((res) => {
          setIsFollow(res)
        })
        .catch(console.log)
    }
  }, [localId, userId, setIsFollow])

  return (
    <UserProfileWrapper className="base-bgc">
      <h2 className="text-center text-bolder base-color nickname">
        {userProfile.user && userProfile.user.nickname}
        {localId !== Number(userId) && !isFollow && (
          <Button
            className="fs-1 pl-0 pr-0 ml-2"
            onClick={(e) => followOne(userId, userProfile.user.nickname)}
            title="关注"
            size="small"
            style={{ backgroundColor: '#e1f1f1' }}
          >
            关注
          </Button>
        )}
      </h2>
      <p className="fs-2 mt-5 mb-3">
        {userProfile.user && userProfile.user.creed}
      </p>
      <p className="text-center line py-3 px-8 border-bottom">
        <IdcardOutlined className="fs-8 base-color" />
      </p>
      <UserDesc />
      {/*构成要素*/}
      <p className="text-center line py-3 px-8 border-bottom">
        <KeyOutlined className="fs-8 base-color" />
      </p>
      <h3 className="fs-4 text-bolder mt-7 table-title">
        <TagOutlined className="base-color pr-2" />
        构成要素
      </h3>
      <table className="detail-table">
        <thead>
          <tr>
            <th>元素</th>
            <th>特征</th>
          </tr>
        </thead>
        <tbody>
          {individual &&
            individual.length > 0 &&
            individual.map((item) => {
              return (
                <tr key={item.id}>
                  <td className="fs-2 pl-3">{item.indivKey}</td>
                  <td className="fs-1 pl-3">{item.indivValue}</td>
                </tr>
              )
            })}
        </tbody>
      </table>
      {/*作品*/}
      <p className="text-center line py-3 px-8 border-bottom">
        <SendOutlined className="fs-8 base-color" />
      </p>
      <h3 className="fs-4 text-bolder mt-7 table-title">
        <TagOutlined className="base-color pr-2" />
        作品
      </h3>
      <ul>
        {userOpus.length > 0 &&
          userOpus.map((item) => {
            return (
              <li key={item.key} className="pb-7">
                <div className="top">
                  <span className="fs-3 text-bolder base-color">
                    {item.opusKey}
                  </span>
                  <a
                    href={item.opusLink || '/'}
                    target="_blank"
                    rel="noopener noreferrer"
                    title={item.opusLink || '/'}
                  >
                    <LinkOutlined className="fs-3 pl-3" />
                  </a>
                </div>
                <div className="bottom pt-3">
                  <p className="fs-3 text-indent">{item.opusValue || ''}</p>
                </div>
              </li>
            )
          })}
      </ul>
      {/*设置*/}
      {localId === Number(userId) && (
        <>
          <p className="text-center line py-3 px-8 border-bottom">
            <SettingOutlined className="fs-8 base-color" />
          </p>
          <h3 className="fs-4 text-bolder mt-7 table-title">
            <TagOutlined className="base-color pr-2" />
            设置
          </h3>
          <div className="setting">
            <Setting />
          </div>
        </>
      )}
    </UserProfileWrapper>
  )
}

export default memo(B_UserProfile)
